<template>
  <div>
    <div class="d-sm-flex justify-content-between align-items-center mb-4">
      <h3 class="text-dark mb-0">数据预览</h3>
    </div>


    <div class="row">
      <div class="col-md-6 col-xl-6 mb-4">
        <div class="card shadow border-start-primary py-2">
          <div class="card-body">
            <div class="row align-items-center no-gutters">
              <div class="col me-2">
                <div class="text-uppercase text-primary fw-bold text-xs mb-1"><span>销售额</span></div>
                <div class="text-dark fw-bold h5 mb-0"><span class="bi-currency-yen"> {{ selledMoney }}</span></div>
              </div>
              <div class="col-auto"><i class="fas fa-clipboard-list fa-2x text-gray-300"></i></div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-xl-6 mb-4">
        <div class="card shadow border-start-primary py-2">
          <div class="card-body">
            <div class="row align-items-center no-gutters">
              <div class="col me-2">
                <div class="text-uppercase text-primary fw-bold text-xs mb-1"><span>销售量</span></div>
                <div class="text-dark fw-bold h5 mb-0"><span class="bi-basket"> {{ selledNumber }}</span></div>
              </div>
              <div class="col-auto"><i class="fas fa-clipboard-list fa-2x text-gray-300"></i></div>
            </div>
          </div>
        </div>
      </div>


    </div>


    <div class="row">
      <div class="col-md-6 col-xl-6 mb-4">
        <div class="card shadow border-start-primary py-2">
          <div class="card-body">
            <div class="row align-items-center no-gutters">
              <div class="col me-2">
                <div class="text-uppercase text-primary fw-bold text-xs mb-1"><span>未发货订单</span></div>
                <div class="text-dark fw-bold h5 mb-0"><span>{{ this.weifahuo }}</span></div>
              </div>
              <div class="col-auto"><i class="fas fa-clipboard-list fa-2x text-gray-300"></i></div>
            </div>
          </div>
        </div>
      </div>


      <div class="col-md-6 col-xl-6 mb-4">
        <div class="card shadow border-start-primary py-2">
          <div class="card-body">
            <div class="row align-items-center no-gutters">
              <div class="col me-2">
                <div class="text-uppercase text-primary fw-bold text-xs mb-1"><span>已发货订单</span></div>
                <div class="text-dark fw-bold h5 mb-0"><span>{{ this.yifahuo }}</span></div>
              </div>
              <div class="col-auto"><i class="fas fa-clipboard-list fa-2x text-gray-300"></i></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="d-sm-flex justify-content-between align-items-center mb-4">
      <h3 class="text-dark mb-0">销售预览</h3>
    </div>
    <div class="row">
      <el-card shadow="always">
        <el-table :data="selles" stripe>
          <el-table-column label="商品ID" prop="gid"></el-table-column>
          <el-table-column label="名称" prop="gname"></el-table-column>
          <el-table-column label="销售量" prop="gselled"></el-table-column>
          <el-table-column label="库存" prop="gnumber"></el-table-column>
        </el-table>
      </el-card>
    </div>
    </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Main",
  components: {},
  data(){
    return{
      selles:[],
      yifahuo:'',
      weifahuo:'',
      selledMoney: '',
      selledNumber:'',
    }
  },
  created() {
    axios.get('http://localhost:9001/goods/selectGoodsBySid?sid='+sessionStorage.getItem("sid")).then(res=>{
      this.selles = res.data;
      var money=0;
      var number=0;
      for (var i=0;i<res.data.length;i++){
        money+=res.data[i].gselled*res.data[i].gprice;
        number+=res.data[i].gselled;
      }
      this.selledMoney = money;
      this.selledNumber = number;
    })
    axios.get('http://localhost:9001/order/selectOrdersBySid?sid='+sessionStorage.getItem("sid")).then(res=>{
      console.log(res.data);
      var yes=0;
      var no=0;
      for (var i=0;i<res.data.length;i++){
        if (res.data[i].ostate == "已付款") {
          no+=1;
        } else if (res.data[i].ostate == "已发货"){
          yes+=1;
        }
      }
      this.weifahuo = no;
      this.yifahuo = yes;
    })
  }
}
</script>

<style scoped>

</style>
